<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>仿谷歌控制台</title>
    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/google.css"/>
</head>
<body>
    <!--中间内容区: 放在第一个位置是因为头部导航的下拉框会被后覆盖-->
    <div class="g-content">
        <div class="jumbotron">
            <div class="container">
            <h1>Hello, world!</h1>
            <p>这是基于bootstrap开发的仿谷歌控制台</p>
            <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-6 col-md-4">
                <div class="thumbnail">
                    <img data-src="holder.js/100%x200" alt="100%x200" src="" data-holder-rendered="true" style="height: 200px; width: 100%; display: block;">
                    <div class="caption">
                        <h3>Thumbnail label</h3>
                        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4">
                <div class="thumbnail">
                    <img data-src="holder.js/100%x200" alt="100%x200" src="" data-holder-rendered="true" style="height: 200px; width: 100%; display: block;">
                    <div class="caption">
                        <h3>Thumbnail label</h3>
                        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4">
                <div class="thumbnail">
                    <img data-src="holder.js/100%x200" alt="100%x200" src="" data-holder-rendered="true" style="height: 200px; width: 100%; display: block;">
                    <div class="caption">
                        <h3>Thumbnail label</h3>
                        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <!--头部导航-->
    <div class="g-top-nav">
        <div class="g-logo">
            <img src="./images/logo.png" />
        </div>
        <div class="g-system-name">
            Actions Console
        </div>
        <div class="g-top-menu">
            <a href="#" class="active">Overview</a>
            <a href="#">Develop</a>
            <a href="#">Test</a>
            <a href="#">Deploy</a>
            <a href="#">Analyze</a>
        </div>
        <div class="g-top-user">
            <div class="dropdown">
                <a class="dropdown-toggle" type="button" id="user-info" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                    Marc
                    <span class="caret"></span>
                </a>
                <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="user-info">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">Logout</a></li>
                </ul>
            </div>
        </div>
    </div>

    <!--左边导航-->
    <div class="g-left-nav active">
        <div class="g-left-menu">
            <a class="g-item active" href="#">
                <span class="glyphicon glyphicon-search"></span>
                <div>Project Details</div>
            </a>
            <a class="g-item" href="#">
                <span class="glyphicon glyphicon-flash" aria-hidden="true"></span>
                <div>Directory information</div>
            </a>
            <a class="g-item" href="#">
                <span class="glyphicon glyphicon-cd" aria-hidden="true"></span>
                <div>Company Details</div>
            </a>
        </div>
        <div class="g-arrow">
            <span class="glyphicon glyphicon-menu-left" aria-hidden="true"></span>
        </div>
    </div>


    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="assets/jquery/jquery.min.js"></script>
    <script src="assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="js/google.js"></script>

</body>
</html>